.switch {
	width: $switch-width;
	height: $switch-height;
	display: inline-block;
	border: $switch-border-width solid lighten($switch-color, 25%);
	background-color: lighten($switch-color, 25%);

  .switch-bar {
    left: -$switch-icon-width;
    height: 100%;
    width: $switch-bar-width;
    position: relative;
  }
  .switch-slider {
  	width: $switch-slider-width;
  	height: 100%;
  	background-color: $switch-color;
  }
  &:hover {
  	border-color: $switch-checked-color;
  }
  &.checked {
  	border-color:  lighten($switch-checked-color, 25%);
  	background-color: lighten($switch-checked-color, 25%);

    .switch-slider {
    	background-color: $switch-checked-color;
    }
    .switch-bar {
    	left: 0;
    }
  }
  .switch-on-block,
  .switch-off-block {
  	width: $switch-icon-width;
  	color: #fff;
  	font-size: $switch-icon-height;
  	text-align: center;
    line-height: $switch-icon-height;
  }
  .switch-on-block,
  .switch-off-block,
  .switch-slider {
  	display: inline-block;
  }
}
.switch-text {
	margin-left: $spacing / 2;
	line-height: $switch-height;
}
